<script setup>
import {reactive, ref} from "vue";

import { User, OfficeBuilding, Edit,
  Iphone, Message, LocationInformation,
  EditPen, UploadFilled
} from '@element-plus/icons-vue'
import axios from "axios";
import {ElMessage} from "element-plus";

// 加载动画
const loading = ref(true)
const buttonLoading = reactive({
  flag: false
})

const info = reactive({
  data: {
    id: "",
    userName: "",
    userCompany: "",
    userSex: "",
    userPhoneNumber: "",
    userEmail: "",
    userBirthday: "",
    userAddress: "",
    userIntroduction: "",
    userHeadImg: ""
  },
  upFile: {}
})

// 水印
const config = reactive({
  content: "",
  font: {
    fontSize: 15,
    color: 'rgba(0, 0, 0, .15)',
  },
  zIndex: -0

})

// 骨架屏
const setLoading = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 500)
}
setLoading()

const headImg = reactive({
  flag: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
})

function getUser(){
  axios({
    method:"GET",
    url:"http://localhost:8080/boot/user/getSession"
  }).then((result) => {
    if(result != null){
      if (result.data.userHeadImg !== null) {
        headImg.flag = "http://localhost:8080/user-head-img/" + result.data.userHeadImg
      }

      info.data.id = result.data.id
      info.data.userName = result.data.userName
      info.data.userCompany = result.data.userCompany
      info.data.userSex = result.data.userSex
      info.data.userPhoneNumber = result.data.userPhoneNumber
      info.data.userEmail = result.data.userEmail
      info.data.userBirthday = result.data.userBirthday
      info.data.userAddress = result.data.userAddress
      info.data.userIntroduction = result.data.userIntroduction
      info.data.userHeadImg = result.data.userHeadImg

      config.content = info.data.userName
    }
  })
}
getUser()

// 页面刷新
function refresh() {
  location.reload()
}

// function percent() {
//   let count = 0;
//   if (info.data.userName != null) {count += 11}
//   if (info.data.userCompany != null) {count += 10}
//   if (info.data.userSex != null) {count += 12}
//   if (info.data.userPhoneNumber != null) {count += 13}
//   if (info.data.userEmail != null) {count += 13}
//   if (info.data.userBirthday != null) {count += 10}
//   if (info.data.userAddress != null) {count += 10}
//   if (info.data.userIntroduction != null) {count += 10}
//   if (info.data.userHeadImg != null) {count += 11}
//
//
//   percentage.value = count
//   alert(percentage.value)
// }

function updateUser() {
//图像上传需要整体上传  需要把字节文件封装在formData对象中  整体传递
  let myFormData = new FormData();//浏览器对象  他会把数据当做整体传递  不会字符化  也不会被编码
  //把所有的参数都封装到formData中
  myFormData.append("id",info.data.id);
  myFormData.append("userName",info.data.userName);
  myFormData.append("userCompany",info.data.userCompany);
  myFormData.append("userSex",info.data.userSex);
  myFormData.append("userPhoneNumber",info.data.userPhoneNumber);
  myFormData.append("userEmail",info.data.userEmail);
  myFormData.append("userBirthday",info.data.userBirthday);
  myFormData.append("userAddress",info.data.userAddress);
  myFormData.append("userIntroduction",info.data.userIntroduction);
  myFormData.append("upFile",info.upFile)//文件对象
  axios({
    method: "POST",//必须是post传值   参数在请求体中  数据量大  不会改变数据格式
    url: "http://localhost:8080/boot/user/updateUser",
    headers: {'Content-Type': 'multipart/form-data'},
    data: myFormData,//post请求必须是有格式的对象参数
  })
      .then(()=>{
        buttonLoading.flag = true

        setTimeout(() => {
          buttonLoading.flag = false
        }, 500)

        ElMessage({
          message: "保存成功",
          type: "success",
        })

        // percent()

        // 刷新页面
        refresh()
      })
}

// function updateUser() {
//   axios({
//     method: "POST",
//     url: "http://localhost:8080/boot/user/updateUser",
//     params: {
//       id: info.data.id,
//       userName: info.data.userName,
//       userCompany: info.data.userCompany,
//       userSex: info.data.userSex,
//       userPhoneNumber: info.data.userPhoneNumber,
//       userEmail: info.data.userEmail,
//       userBirthday: info.data.userBirthday,
//       userAddress: info.data.userAddress,
//       userIntroduction: info.data.userIntroduction
//     }
//   })
//       .then(()=>{
//         buttonLoading.flag = true
//
//         setTimeout(() => {
//           buttonLoading.flag = false
//         }, 500)
//
//         ElMessage({
//           message: "保存成功",
//           type: "success",
//         })
//       })
// }

// 阻止文件action方式上传
const beforeUpload = () => {
  return false
}
// 文件改变函数，获取上传文件
const getFileChange = (file) => {
  console.log("文件改变事件", file)
  console.log("上传的文件", file.raw)
  info.upFile = file.raw
}


// const percentage = ref(11)
</script>

<template>
  <!--骨架屏-->
  <el-skeleton
      style="--el-skeleton-circle-size: 100px"
      animated
      :loading="loading"
  >
    <template #template>
      <el-skeleton-item variant="circle" />
    </template>
  </el-skeleton>
  <br />
  <el-skeleton :rows="5" animated :loading="loading"/>
  <br/>
  <br/>
  <br/>
  <el-skeleton :rows="5" animated :loading="loading"/>

<!--控制骨架屏与其它元素的交替展示-->
  <div v-show="!loading">
<!--水印-->
    <el-watermark
        :font="config.font"
        :z-index="config.zIndex"
        :content="config.content"
    >
      <!--头像-->
      <div class="demo-type" style="z-index: 3">
        <div>
          <el-avatar
              :src="headImg.flag"
              :size="100"
              style="position: relative; top: -80%"
          />
        </div>
      </div>
      <!--头像文件上传-->
      <el-upload
          class="upload-demo"
          action=""
          :limit="1"
          :before-upload="beforeUpload"
          :on-change="getFileChange"
          :auto-upload="false"
          style="position: relative; top: -75px"
      >
        <template #trigger>
          <el-button
              type="primary"
              round
              :icon="UploadFilled"
              style="z-index: 3;">
            上传我的头像~
          </el-button>
        </template>
      </el-upload>
      <!--个人信息部分-->
      <!--descriptions-->
      <el-descriptions
          title="个人信息"
          class="margin-top"
          style="position: relative; top: -65px; z-index: 1"
          :column="3"
          border
          size="large"
      >
        <!--用户名-->
        <el-descriptions-item
            label="用户名"
            span="1"
            min-width="10"
            align="left"
        >
          <el-input
              v-model="info.data.userName"
              type="text"
              size="large"
              autocomplete="off"
              placeholder="用户名"
              :prefix-icon="User"
              style="width: 50%"
          />
        </el-descriptions-item>
        <!--公司-->
        <el-descriptions-item
            label="公司"
            span="1"
            min-width="10"
        >
          <el-input
              v-model="info.data.userCompany"
              type="text"
              size="large"
              autocomplete="off"
              placeholder="所在公司"
              :prefix-icon="OfficeBuilding"
              style="width: 50%"
          />
        </el-descriptions-item>
      </el-descriptions>
      <!--descriptions-->
      <el-descriptions
          class="margin-top"
          style="position: relative; top: -65px; z-index: 1"
          :column="3"
          border
          size="large"
      >
        <!--性别-->
        <el-descriptions-item
            label="性别"
            min-width="10"
        >
          <el-radio-group v-model="info.data.userSex">
            <el-radio-button label="男" value="1" />
            <el-radio-button label="女" value="2" />
          </el-radio-group>
        </el-descriptions-item>
        <!--手机号-->
        <el-descriptions-item
            label="手机号"
            min-width="10"
        >
          <el-input
              v-model="info.data.userPhoneNumber"
              type="text"
              size="large"
              autocomplete="off"
              placeholder="手机号码"
              :prefix-icon="Iphone"
              style="width: 50%"
          />
        </el-descriptions-item>
        <!--邮箱-->
        <el-descriptions-item
            label="邮箱"
            min-width="10"
        >
          <el-input
              v-model="info.data.userEmail"
              type="text"
              size="large"
              autocomplete="off"
              placeholder="邮箱"
              :prefix-icon="Message"
              style="width: 50%"
          />
        </el-descriptions-item>
      </el-descriptions>
      <!--descriptions-->
      <el-descriptions
          class="margin-top"
          style="position: relative; top: -65px; z-index: 1"
          :column="2"
          border
          size="large"
      >
        <!--生日-->
        <el-descriptions-item
            label="生日"
            min-width="10"
        >
          <div class="block">
            <el-date-picker
                v-model="info.data.userBirthday"
                type="date"
                placeholder="Pick a day"
                size="large"
            />
          </div>
        </el-descriptions-item>
        <!--地址-->
        <el-descriptions-item
            label="地址"
            min-width="10"
        >
          <el-input
              v-model="info.data.userAddress"
              type="text"
              size="large"
              autocomplete="off"
              placeholder="所在地"
              :prefix-icon="LocationInformation"
              style="width: 50%"
          />
        </el-descriptions-item>
        <!--个人简介-->
        <br>
        <el-descriptions-item
            label="个人简介"
            min-width="10"
        >
          <el-input
              v-model="info.data.userIntroduction"
              type="textarea"
              size="large"
              autocomplete="off"
              placeholder="介绍一下你自己~"
              :prefix-icon="EditPen"
              :autosize="{ minRows: 2, maxRows: 5 }"
              style="width: 50%"
          />
        </el-descriptions-item>
      </el-descriptions>
      <!--提交按钮-->
      <el-button type="primary" round :icon="Edit" @click="updateUser" :loading="buttonLoading.flag" style="z-index: 3">
        <template #loading>
          <div class="custom-loading">
            <svg class="circular" viewBox="-10, -10, 50, 50">
              <path
                  class="path"
                  d="
            M 30 15
            L 28 17
            M 25.61 25.61
            A 15 15, 0, 0, 1, 15 30
            A 15 15, 0, 1, 1, 27.99 7.5
            L 15 15
          "
                  style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"
              />
            </svg>
          </div>
        </template>
        保&nbsp;&nbsp;&nbsp;存
      </el-button>

      <!--进度条-->
<!--      <div class="demo-progress" style="z-index: 3">-->
<!--        <el-progress-->
<!--            type="circle"-->
<!--            :percentage="percentage"-->
<!--            style="position: relative; left: 89%; top: -60px"-->
<!--        />-->
<!--      </div>-->
    </el-watermark>

  </div>

</template>

<style scoped>
/*进度条*/
.demo-progress .el-progress--circle {
  margin-right: 15px;
}
/*头像*/
.demo-type {
  display: flex;
}
.demo-type > div {
  flex: 1;
}
.demo-type > div:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}
.margin-top {
  margin-top: 20px;
}


/*加载按钮*/
.el-button .custom-loading .circular {
  margin-right: 6px;
  width: 18px;
  height: 18px;
  animation: loading-rotate 2s linear infinite;
}
.el-button .custom-loading .circular .path {
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 2;
  stroke: var(--el-button-text-color);
  stroke-linecap: round;
}
</style>